<template>
    <div>
        <Button-group class="btn-group">
            <Button @click="ins_modal_add = true">新增</Button>
            <Button @click="exportData(2)">导出</Button>
        </Button-group>
        <Table border stripe :columns="ins_header" :data="ins_list" size="small"  ref="table" class="table"></Table>
   
        <Modal v-model="ins_modal_add" title="添加一个学院" @on-ok="ins_add_save" @on-cancel="cancel">
            <Form :model="ins_add_data" :label-width="80">
                <Form-item label="学院名称：">
                    <Input v-model="ins_add_data.name" placeholder="请输入"></Input>
                </Form-item>
    
                <Form-item label="创建日期：">
                    <Date-picker type="date" placeholder="选择日期" v-model="ins_add_data.createTime"></Date-picker>
                </Form-item>
    
                <Form-item label="备注：">
                    <Input v-model="ins_add_data.remark" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>
                </Form-item>
    
            </Form>
        </Modal>
    
        <Modal v-model="ins_modal_edit" title="编辑一个学院" @on-ok="ins_edit_save" @on-cancel="cancel">
            <Form :model="ins_edit_data" :label-width="80">
                <Form-item label="学院名称：">
                    <Input v-model="ins_edit_data.name" placeholder="请输入"></Input>
                </Form-item>
    
                <Form-item label="创建日期：">
                    <Date-picker type="date" placeholder="选择日期" v-model="ins_edit_data.createTime"></Date-picker>
                </Form-item>
    
                <Form-item label="备注：">
                    <Input v-model="ins_edit_data.remark" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>
                </Form-item>
    
            </Form>
        </Modal>
    
        <Modal v-model="ins_modal_del" title="删除一个学院" @on-ok="ins_delete_save" @on-cancel="cancel">
            <Form :model="ins_dele_data" :label-width="80">
                <p>您确定删除这个记录吗？</p>
    
            </Form>
        </Modal>
    
    </div>
</template>
<script>
export default {
    data() {
        return {
            ins_header: [
                {
                    type: 'index',
                    width: 60,
                    align: 'center'
                },
                {
                    "title": "学院名称",
                    "key": "name",
                    "width": 200,
                    "sortable": true,
                },
                {
                    "title": "创建时间",
                    "key": "createTime",
                    "width": 150,
                    "sortable": true
                },
                {
                    "title": "备注",
                    "key": "remark",
                    "width": 150,
                    "sortable": true
                },
                {
                    "title": '操作',
                    "min-width": 150,
                    "align": 'center',
                    render: (h, params) => {
                        return h('div', [
                            h('Button', {
                                props: {
                                    type: 'primary',
                                    size: 'small'
                                },
                                style: {
                                    marginRight: '5px'
                                },
                                on: {
                                    click: () => {
                                        this.show(params)
                                    }
                                }
                            }, '编辑'),
                            h('Button', {
                                props: {
                                    type: 'error',
                                    size: 'small'
                                },
                                on: {
                                    click: () => {
                                        this.remove(params)
                                    }
                                }
                            }, '删除')
                        ]);
                    }
                }


            ],
            ins_list: [],
            ins_list_temp: [],
            ins_modal_add: false,
            ins_modal_edit: false,
            ins_modal_del: false,
            ins_add_data: {
                name: '',
                createTime: '',
                remark: ''
            },
            ins_edit_data: {
                id: '',
                name: '',
                createTime: '',
                remark: ''
            },
            ins_dele_data: {
                id: '',
                name: '',
                createTime: '',
                remark: ''
            },
            ins_dele_index: '',
            ins_edit_index: '',

        }
    },
    methods: {
        exportData(type) {
            if (type === 1) {
                this.$refs.table.exportCsv({
                    filename: '原始数据'
                });
            } else if (type === 2) {
                this.$refs.table.exportCsv({
                    filename: '排序和过滤后的数据',
                    original: false
                });
            }
        },
        ok() {
            this.$Message.info('点击了确定');
        },
        cancel() {
            this.$Message.info('点击了取消');
        },
        show(params) {
            this.ins_edit_data = params.row;
            this.ins_modal_edit = true;
            this.ins_edit_index = params.index;

        },
        remove(params) {
            this.ins_modal_del = true;
            this.ins_dele_data = params.row;
            this.ins_dele_index = params.index;
        },
        ins_add_save() {
            var _self = this;
            this.$ajax.post('/mes/core/institute/signal', this.ins_add_data)
                .then(function (response) {
                    if (response) {
                        if (response.data.status == 'success') {
                            _self.$Message.info('保存成功');
                            _self.ins_add_data.id = response.data.data;
                            _self.ins_list.push(_self.ins_add_data);
                            return;
                        }
                    }
                    _self.$Message.info('保存失败');
                })
                .catch(function (error) {
                    console.log(error);
                });

        },
        ins_edit_save() {
            var _self = this;
            this.$ajax.post('/mes/core/institute/signal', this.ins_edit_data)
                .then(function (response) {
                    _self.ins_list = response.data;
                })
                .catch(function (error) {
                    console.log(error);
                });
        },
        ins_delete_save() {
            var _self = this;
            this.$ajax.delete("/mes/core/institute/signal?id=" + this.ins_dele_data.id, )
            .then(function (response) {
                if (response) {
                    if (response.data.status == 'success') {
                        _self.$Message.info('删除成功');
                        _self.ins_list.splice(_self.ins_dele_index, 1);
                        return;
                    }
                }
                _self.$Message.info('删除失败');
            })
            .catch(function (error) {
                console.log(error);
            });

        }

    },
    mounted() {

        var _self = this;

        this.$ajax.get('/mes/core/institute/all')
            .then(function (response) {
                _self.ins_list = response.data;
            })
            .catch(function (error) {
                console.log(error);
            });
    }
}
</script>

<style>
.btn-group {
    margin-bottom: 5px;
}
</style>
